<template>
  <div class="app-container">
    <el-form
      ref="form"
      size="small"
      :model="form"
      label-width="6em"
      label-suffix=":"
    >
      <el-row class="card">
        <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
      </el-row>

      <div class="card">
        <div
          v-for="item in questionData"
          :key="item.questionTypeName"
          class="question-type-list"
        >
          <div class="type-name">{{ item.questionTypeName }}</div>
          <el-divider />
          <div
            v-for="(vItem, vIndex) in item.djExamPaperScores"
            :key="vItem.questionId"
            class="question-item"
          >
            <div class="question-name">
              {{ `${vIndex + 1}、${vItem.questionTitleContent}` }}
            </div>
            <template
              v-if="
                item.questionTypeName === '填空题' &&
                Array.isArray(vItem.paperCustomerGapFilling) &&
                vItem.paperCustomerGapFilling.length > 0
              "
            >
              <el-form-item
                v-for="v in vItem.paperCustomerGapFilling"
                :key="v.prefix"
                :label="'考生答案' + v.prefix"
              >
                <div class="primary-color">{{ v.content }}</div>
              </el-form-item>
            </template>
            <el-form-item v-else label="考生答案">
              <div class="primary-color">
                {{ vItem.paperCustomerShortAnswer }}
              </div>
            </el-form-item>
            <template v-if="item.questionTypeName === '填空题'">
              <el-form-item
                v-for="(v, i) in vItem.questionItems"
                :key="'ks' + v.prefix"
                :label="'正确答案' + (i + 1)"
              >
                <div class="success-color">{{ v.content }}</div>
              </el-form-item>
            </template>
            <el-form-item v-else label="正确答案">
              <div class="success-color">
                {{ vItem.questionCorrect }}
              </div>
            </el-form-item>
            <el-form-item label="答案解析">
              {{ vItem.questionAnalyze }}
            </el-form-item>
            <el-form-item label="批改打分">
              <el-input-number
                v-model="form[vItem.paperCustomerAnswerId].correctScore"
                :disabled="hasMarking"
                :step="0.5"
                :min="0"
                :max="vItem.questionScore"
              />
              <span class="tips">(本题{{ vItem.questionScore }}分)</span>
            </el-form-item>
            <el-form-item label="批改说明">
              <el-input
                v-model="form[vItem.paperCustomerAnswerId].comment"
                :disabled="hasMarking"
                type="textarea"
              />
            </el-form-item>
          </div>
        </div>
        <el-row
          v-if="!hasMarking"
          style="margin-top: 20px"
          type="flex"
          justify="center"
        >
          <el-button type="primary" @click="submit">保存</el-button>
        </el-row>
      </div>
    </el-form>

    <el-dialog
      width="400px"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-result icon="success" title="阅卷成功" :sub-title="subTitle">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="back">返回</el-button>
        </template>
      </el-result>
    </el-dialog>
  </div>
</template>

<script>
import {
  getModifyExamPaperInfo,
  getModifyInfo,
  submitReadOver,
} from "@/api2/marking";

export default {
  props: {
    answerId: {
      type: [String, Number],
      default: "",
    },
    obj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      questionData: [],
      questionList: [],
      form: {},
      subTitle: "",
      dialogVisible: false,
    };
  },
  computed: {
    hasMarking() {
      return JSON.stringify(this.obj) === "{}";
    },
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    back() {
      this.$emit("change", { componentName: "markingList" });
      this.dialogVisible = false;
    },
    async getDetail() {
      const params = { answerId: this.answerId };

      if (this.hasMarking) {
        const { data } = await getModifyInfo(params);
        this.questionData = data;
      } else {
        const { data } = await getModifyExamPaperInfo(params);
        this.questionData = data.filter((item) =>
          ["填空题", "简答题"].includes(item.questionTypeName)
        );
      }
      this.questionList = this.questionData.reduce((arr, item) => {
        arr = arr.concat(item.djExamPaperScores);
        return arr;
      }, []);
      this.form = this.questionList.reduce((obj, item) => {
        if (item.questionTypeName === "填空题") {
          obj[item.paperCustomerAnswerId] = {
            correctScore: item.djQuestionCorrectList?.correctScore || 0,
            comment: item.djQuestionCorrectList?.comment || "",
          };
        } else {
          obj[item.paperCustomerAnswerId] = {
            correctScore: item.djQuestionCorrect?.correctScore || 0,
            comment: item.djQuestionCorrect?.comment || "",
          };
        }
        return obj;
      }, {});
    },
    async submit() {
      const djQuestionReadOver = this.questionList.map((item) => {
        const {
          answerId,
          paperCustomerAnswerId,
          paperCustomerTextContentId,
          questionScore,
          questionTypeName,
        } = item;

        const obj = {
          answerId,
          paperCustomerAnswerId,
          paperCustomerTextContentId,
          questionScore,
          questionTypeName,
        };
        if (questionTypeName === "填空题") {
          obj.paperCustomerGapFilling = {
            correctScore: this.form[paperCustomerAnswerId].correctScore,
            comment: this.form[paperCustomerAnswerId].comment,
            gapFillingContent: item.paperCustomerGapFilling,
          };
        } else {
          obj.paperCustomerShortAnswer = {
            correctScore: this.form[paperCustomerAnswerId].correctScore,
            comment: this.form[paperCustomerAnswerId].comment,
            customContent: item.paperCustomerShortAnswer,
          };
        }
        return obj;
      });
      const params = { djQuestionReadOver, ...this.obj };
      const { msg } = await submitReadOver(params);
      this.subTitle = msg;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100%;
  background-color: #f4f5fc;
  .card {
    padding: 15px 20px;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    background-color: #fff;
    & + .card {
      margin-top: 10px;
    }
  }
  .question-type-list + .question-type-list,
  .question-item + .question-item {
    margin-top: 10px;
  }
  .question-item {
    padding: 15px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
  }
  .type-name {
    line-height: 36px;
    color: #364a71;
  }
  .question-name {
    line-height: 32px;
    margin-bottom: 10px;
    color: #333;
  }
  .tips {
    margin-left: 15px;
    color: #888;
  }
  .primary-color {
    color: #409eff;
  }
  .success-color {
    color: #67c23a;
  }
}
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.el-divider--horizontal {
  margin: 10px 0 20px;
}
</style>
